<template>
	<view>
		<!-- 自定义导航栏 -->
		<view class="topBar">
			<view>
				<uni-nav-bar @clickLeft="back" height="50px" backgroundColor="#3284fc" left-icon="left" :border="false"
					leftText="返回" rightText="设置" title="订单支付" color="#fff" />
			</view>

			<view class="Info">
				<uni-card class="card1">
					<view class="contentItem">
						<image class="img1" src="../../static/myf_img/对 拷贝.png"></image>
						<view style="font-size: 36rpx; font-weight: 700; color: deeppink; margin-top: 30rpx;">宝贝,支付成功!
						</view>
						<view style="font-size: 50rpx; font-weight: 700; margin-top: 30rpx;">39.90</view>
						<view style="font-size: 36rpx; margin-top: 30rpx;">我的编号:99999999</view>

						<!-- 按钮 -->
						<button class="btn1" @click="toIndex">返回首页</button>
						<button class="btn2" @click="toOrder">订单详情</button>
					</view>
				</uni-card>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {

			}
		},
		methods: {
			back() {
				uni.switchTab({
					url: "/pages/index/index"
				})
			},
			toIndex() {
				uni.switchTab({
					url: '/pages/index/index'
				})
			},
			toOrder() {
				uni.navigateTo({
					url: '/pages/OrderDetails/OrderDetails'
				})
			},
		}
	}
</script>

<style>
	.contentItem .btn2 {
		width: 450rpx;
		background-color: darkviolet;
		border-radius: 100rpx;
		color: #fff;
		text-align: center;
		line-height: 80rpx;
		margin: 50rpx auto;
	}

	.contentItem .btn1 {
		width: 450rpx;
		background-color: lightskyblue;
		border-radius: 100rpx;
		color: #fff;
		text-align: center;
		line-height: 80rpx;
		margin: 50rpx auto;
	}

	.contentItem {
		margin: 0 auto;
		width: 600rpx;
		height: 800rpx;
		/* 
		当对一个块级元素设置text - align: center时，其内部的行内元素会水平居中。 
		 */
		text-align: center;

	}

	.contentItem .img1 {
		width: 120rpx;
		height: 120rpx;
		margin-top: 30rpx;
	}

	.topBar {
		background-color: #3284fc;
		width: 750rpx;
		height: 400rpx;
	}
</style>